<template>
	<div class="vid" v-if="getid==curTid">
		<div class="wrap">
			<div class="cont_header">
				<p>热门推荐</p>
			<router-link to class="pxp">
				<svg class="index__icon__src-partition-recommend- index__fill__src-partition-recommend-" aria-hidden="true"><use xlink:href="#icon-paihangbang1"></use></svg>
				<p>排行榜</p>
				<div class="pxp_arrow">
					<svg class="index__icon__src-partition-recommend-" aria-hidden="true"><use xlink:href="#icon-gengduo"></use></svg>
				</div>
			</router-link>
			</div>
			<div class="vid_wrap">
				<div class="con" v-for="(item,index) in conData" :key="index" v-if="index<4">
					<a href="" class="con_wrap">
						<div class="con_img">
							<img src="../assets/tv.png" class="bgImg"/>
							<img v-lazy="item.pic" class="indexImg"/>
						</div>
						<div class="play_wrap">
							<div class="play_icon">
								<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true"><use xlink:href="#icon-bofangshu"></use></svg>
							</div>
							<div class="play_total">
								<p>{{numChange(item.play)}}</p>
							</div>
							<div class="play_danmu">
								<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true"><use xlink:href="#icon-danmushu"></use></svg>
							</div>
							<div class="danmu_total">
								<p>{{item.video_review}}</p>
							</div>
						</div>
					</a>
					<a href="" class="title">
						<p>{{item.title}}</p>
					</a>
				</div>
			</div>
		</div>
		<div class="wrap" v-for="(item,index) in titleList" :key="index">
			<div class="cont_header">
				<p>{{item.typename}}</p>
				<router-link to class="more">
					<p>查看更多</p>
					<div class="more_arrow">
						<svg class="index__icon__src-partition-different-" aria-hidden="true"><use xlink:href="#icon-gengduo"></use></svg>
					</div>
				</router-link>
			</div>
			<div class="vid_wrap">
				<div class="con" v-for="(ite,index) of tempList" v-if="fu(item.typename,ite.typename)">
					<a href="" class="con_wrap">
						<div class="con_img">
							<img src="../assets/tv.png"/>
							<img v-lazy="ite.pic" alt="" class="indexImg" />
						</div>
						<div class="play_wrap">
							<div class="play_icon">
								<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true"><use xlink:href="#icon-bofangshu"></use></svg>
							</div>
							<div class="play_total">
								<p>{{numChange(item.play)}}</p>
							</div>
							<div class="play_danmu">
								<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true"><use xlink:href="#icon-danmushu"></use></svg>
							</div>
							<div class="danmu_total">
								<p>{{item.video_review}}</p>
							</div>
						</div>
					</a>
					<a href="" class="title">
						<p>
							{{ite.title}}	
						</p>
					</a>
					</div>
				</div>
			</div>		
		</div>
	</div>
	
	<div class="vid" v-else>
		<div class="wrap">
			<div class="cont_header">
				<p>热门推荐</p>
			</div>
			<div class="vid_wrap">
				<div class="con" v-for="(item,index) in conData" :key="index" v-if="index<4">
					<a href="" class="con_wrap">
						<div class="con_img">
							<img src="../assets/tv.png" class="bgImg"/>
							<img v-lazy="item.pic" alt="" class="indexImg" />
						</div>
						<div class="play_wrap">
							<div class="play_icon">
								<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true"><use xlink:href="#icon-bofangshu"></use></svg>
							</div>
							<div class="play_total">
								<p>{{numChange(item.play)}}</p>
							</div>
							<div class="play_danmu">
								<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true"><use xlink:href="#icon-danmushu"></use></svg>
							</div>
							<div class="danmu_total">
								<p>{{item.video_review}}</p>
							</div>
						</div>
					</a>
					<a href="" class="title">
						<p>
							{{item.title}}	
						</p>
					</a>
				</div>
			</div>
		</div>
		
		<div class="wrap">
			<div class="cont_header">
				<p>最新视频</p>
			</div>
			<div class="vid_wrap">
				<div class="con" v-for="(ite,index) of conData" :key="index" v-if="index<10">
					<a href="" class="con_wrap">
						<div class="con_img">
							<img src="../assets/tv.png" class="bgImg"/>
							<img v-lazy="ite.pic" alt="" class="indexImg" />
						</div>
						<div class="play_wrap">
							<div class="play_icon">
								<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true"><use xlink:href="#icon-bofangshu"></use></svg>
							</div>
							<div class="play_total">
								<p>{{numChange(ite.play)}}</p>
							</div>
							<div class="play_danmu">
								<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true"><use xlink:href="#icon-danmushu"></use></svg>
							</div>
							<div class="danmu_total">
								<p>{{ite.video_review}}</p>
							</div>
						</div>
					</a>
					<a href="" class="title">
						<p>
							{{ite.title}}	
						</p>
					</a>
				</div>
			</div>
		</div>
	
	</div>

</template>

<script>
	import axios from 'axios';
	let partitionList=window.__INITIAL_STATE__.reduxAsyncConnect.partitionList
	export default{
		props:{
			tid:{
				type:[String,Number],
				default:"1"
			}
		},
		data(){
			return{
				getid:'',
				titleList:[],
				tempList:[],
				conData:[],
				curTid:'1'
			}
		},
		created(){
			this.$store.commit('setTid',{
				curTid:this.$route.params.tid
			})
			this.curTid=this.$store.getters.getCurTid
			this.titleList = partitionList[this.tid]
//			console.log(this.titleList)
			this.getid = this.$route.params.tid
//			console.log(this.$store.getters.getCurTid)
//			console.log(this.getid)
			this.getMsg()
		},
		watch:{
			$route(newValue){
				this.$emit("chageTid",newValue.params.tid)
			},
			tid(newValue){
				this.curTid=this.$store.getters.getTid
//				console.log(this.curTid)
				this.titleList = partitionList[this.tid]
				this.getid = this.$route.params.tid
//				console.log(this.getid)
				this.getMsg()
			}
		},
		methods:{
			getMsg(){
				let url_ = '/all?rid=';
				const ur =  '/all?rid='+this.getid;
				this.tempList=[];
					axios.get(ur).then((res) => {
	//					console.log(res.data.data)
						this.conData = res.data.data
					})
				if(this.getid==this.curTid){
					this.titleList.forEach((el,index)=>{
//						console.log(el.tid)
						let url_t = url_+el.tid;
						axios.get(url_t).then((res)=>{
	//						console.log(res.data.data)
							res.data.data.splice(0,4).forEach((el)=>{
	//								console.log(el)
								this.tempList.push(el)
							})
						})
					})
				}
				console.log(this.tempList)
			},
			fu(a,b){
				return a==b
			},
			numChange(list){
				return list>10000?(list/10000).toFixed(1)+'万':list
			}
		}
	}
</script>

<style lang="scss">
	.vid{
		position: relative;
	    width: 100%;
	    padding-top: 15%;
	    .wrap{
	    	position: relative;
	    	.cont_header{
	    		display:flex;
    	    	margin-bottom: 2%;
    	    	padding: 0 3%;
    	    	height:45px;
    	    	justify-content:space-between;
		    	align-items:center;
		    	&>p{
		    		font-size: 18px;
				    line-height: 45px;
				    text-align: left;
				    color: #212121;
		    	}
		    	.pxp{
		    		display:flex;
			    	justify-content:space-around;
			    	align-items:center;
			    	line-height:45px;
			    	&>svg{
		    		    width: 32px;
    					height: 22px;
					    fill: #ffa726;
			    	}
			    	&>p{
			    		font-size:14px;
			    		color:#ffa726;
			    	}
			    	.pxp_arrow{
			    		line-height:45px;
			    		text-align:center;
			    		margin-top:1%;
			    		&>svg{
			    			width: 28px;
    						height: 15px;
    						fill: #aaa;
			    		}
			    	}
		    	}
		    	.more{
			    	display:flex;
			    	justify-content:space-between;
			    	align-items:center;
			    	&>p{
			    		font-size:14px;
			    		color: #999;
			    	}
			    	.more_arrow{
			    		margin-top:5%;
			    		&>svg{
			    			width: 28px;
    						height: 15px;
    						fill: #aaa;
			    		}
			    	}
			    }
	    	}
	    }
	    .vid_wrap{
    	    position: relative;
		    padding-left: 6px;
		    padding-right: 6px;
		    display: flex;
		    flex-wrap:wrap;
		    .con{
		    	width: 50%;
		    	margin-bottom: 16px;
		    	padding: 0 6px;
		    	.con_wrap{
		    		display: block;
		    		text-decoration: none;
	    		    position: relative;
				    width: 100%;
				    overflow: hidden;
				    margin: auto;
				    border-radius: 5px;
				    background-color: #e7e7e7;
				    background-image: linear-gradient(transparent 50%,rgba(0,0,0,.5));
					.con_img{
						width: 100%;
						height: 106px;
						.bgImg{
							position: relative;
							display: block;
							width: 60%;
							height: 106px;
							margin: auto;
						}
						.indexImg{
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
						}
					}
					.play_wrap{
						display: flex;
						position: absolute;
						left: 0;
						bottom: 0;
						height: 16px;
						width: 100%;
						padding-left: 8px;
					    background: linear-gradient(180deg,rgba(33,33,33,0),rgba(33,33,33,.5));
					    .play_icon{
					    	width: 16px;
					    	margin-top: -1.5px;
					    	svg{
				    		    display: block;
							    width: 100%;
					    		height: 16px;
							    fill: #fff;
					    	}
					    }
					    .play_total{
					    	margin-left: 6px;
					    	width: 48px;
					    	p{
					    		text-align: left;
							    font-size: 12px;
							    color: #fff;
							    line-height: 14px;
							    transform: scale(0.8);
					    		transform-origin: left;
					    	}
					    }
					    .play_danmu{
					    	width: 16px;
					    	margin-top: -1.5px;
					    	svg{
				    		    display: block;
							    width: 100%;
					    		height: 16px;
							    fill: #fff;
					    	}
					    }
					    .danmu_total{
					    	margin-left: 6px;
					    	width: 48px;
					    	p{
					    		text-align: left;
							    font-size: 12px;
							    color: #fff;
							    line-height: 14px;
							    transform: scale(0.8);
					    		transform-origin: left;
					    	}
					    }
					}
		    	}
		    	.title{
		    		display: block;
		    		text-decoration: none;
		    		width: 100%;
				    position: relative;
				    margin: auto;
				    margin-top: 5px;
				    overflow: hidden;
				    height: 32px;
				    p{
			    	    font-size: 12px;
					    color: #212121;
					    letter-spacing: 0;
					    text-align: left;
					    line-height: 16px;
					    
				    }
		    	}
		    }
	    }
	}
</style>